<template>
	<view class="page">
		<u-navbar autoBack left-icon="close" fixed placeholder bgColor="transparent" leftIconColor="#232832"></u-navbar>
		<c-content :top="statusBarHeight + 44" padding="0">
			<view class="page-title">
				<text>登陆更精彩</text>
			</view>
			<view class="page-content">
				<view class="btn-group-list">
					<view class="btn" v-for="(btn, index) in btns" :key="index" @click="goNext(btn.type)">
						<view class="icon">
							<text :class="btn.icon" :style="{ color: `${btn.color}` }"></text>
						</view>
						<view class="btn-label">{{ btn.label }}</view>
					</view>
				</view>
			</view>
			<view class="page-footer__title" :style="{ bottom: `${bottom}px` }">
				<view>
					登陆则表示已详读并同意
					<text @click="goPage('0')">用户协议</text>和<text @click="goPage('1')">隐私政策</text>
				</view>
			</view>
		</c-content>
	</view>
</template>

<script>
	import mixins from '@/mixins/index.js'
	export default {
		mixins: [mixins],
		data() {
			return {
				value: [false],
				btns: [{
						color: '#FF4E4D',
						icon: 'icon-phone',
						label: '手机号登陆',
						type: '0'
					},
					{
						color: '#0D92FF',
						icon: 'icon-pwd',
						label: '账号密码登陆',
						type: '1'
					},
					// #ifdef MP-WEIXIN
					{
						color: '#28C445',
						icon: 'icon-weixin',
						label: '微信登陆',
						type: '2'
					}
					// #endif
				]
			}
		},
		computed: {
			bottom() {
				return uni.getWindowInfo().safeAreaInsets.bottom + 40
			}
		},
		methods: {
			goNext(type) {
				if (type == '0') {
					uni.navigateTo({
						url: '/pages/login/phone'
					})
				} else if (type == '1') {
					uni.navigateTo({
						url: '/pages/login/account'
					})
				} else if (type == '2') {
					uni.login({
						provider: 'weixin',
						success: ({
							code
						}) => {
							this.$request.post('/login', {
								code,
								type: 'wx'
							}).then(res => {
								console.log(res);
							})
						}
					})
				}
			},
			goPage(type) {
				let url = ''
				if (type == '0') {
					url = '/pages/common/protocol'
				} else if (type == '1') {
					url = '/pages/common/policy'
				}
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #FFFFFF;

		&-title {
			margin: 50px 0 10px;
			color: #232832;
			font-size: 24px;
			line-height: 28px;
			font-weight: 500;
			vertical-align: top;
			text-align: center;
		}

		&-content {

			[class*=icon] {
				font-size: 16px;
				padding-left: 8px;
			}

			.btn-group-list {
				margin: 50px 30px 10px;
			}

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 20px 0;
				border: 1px solid #DDDDDD;
				border-radius: 20px;
				padding: 10px 0;

				&-label {
					flex: 1;
					padding-right: 8px;
					color: #232832;
					font-size: 15px;
					font-weight: 400;
					line-height: 18px;
					text-align: center;
				}
			}
		}

		&-footer__title {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			width: 100%;
			color: #787b86;
			box-sizing: border-box;
			font-size: 12px;
			font-weight: 400;
			line-height: 18px;
			text-align: center;

			text {
				margin: 0 2px;
				color: #6E86FF;
				white-space: nowrap;
			}
		}
	}
</style>